<template>
    <div class="login">
        <div class="login-head">登录</div>
        <div class="login-main">
            <div class="login-list">
                <div class="login-title">手机号</div>
                <input class="login-input" type="number" v-model="tel" placeholder="请输入手机号码">
            </div>
            <div class="login-list">
                <div class="login-title">密码</div>
                <input class="login-input" type="password" v-model="psw" placeholder="请输入登录密码">
            </div>
            <div class="login-btn" @click="doLogin">立即登录</div>
            <div class="login-foot">
                <div class="login-toRegiste" @click="toRegiste">注册账号</div>
                <div class="login-forget" @click="toForget">忘记密码</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Login extends Sence {
        public tel: any = ""; // 手机号
        public psw: any = ""; // 密码

        /**
         * 初始化
         */
        public mounted():void{
            if(localStorage.getItem('token')){
                this.$router.push('/')
            }
        }

        /**
         * 表单失去焦点回滚底部
         */
        public inputScroll():void{
            window.scrollTo(0, document.documentElement.clientHeight);
        }

        /**
         * 前往注册
         */
        public toRegiste(): void {
            this.$router.push("/registe");
        }
        public toForget(): void{
            this.$router.push("/forget");

        }

        /**
         * 登录
         */
        public doLogin(): void {
            this.inputScroll();
            let CryptoJS: any = require("crypto-js");
            let password: any = CryptoJS.AES.encrypt(CryptoJS.MD5(this.psw).toString(), CryptoJS.enc.Utf8.parse("sgg45747ss223411"), {mode: CryptoJS.mode.ECB}).toString();
            this.post("api/user/password_login", {
                phone: this.tel,
                password,
                id:localStorage.getItem('third_id')
            }).then((res: any) => {
                localStorage.setItem("token", res.data.token);
                this.$router.push("/");
            });
        }
    }


</script>

<style scoped lang="stylus">
    input {
        outline: none;
        border: 0;
        padding 5px 0;
    }

    .login
        height 100vh
        width 100vw
        background-image url("../image/login.png")
        background-size 100%

        .login-head
            height 35px
            line-height 35px
            color white
            font-size 16px
            font-weight bold
            text-align center

        .login-main
            width 80vw
            margin auto
            margin-top 20vh
            background white
            border-radius 8px
            box-sizing border-box
            padding 0 10px

            .login-foot
                display flex
                flex-direction row
                justify-content space-between

            .login-list
                display flex
                align-items center
                border-bottom 1px solid #eee
                padding 8px 0

                .login-title
                    font-size 14px
                    font-weight bold
                    width 23vw

                .login-input
                    width calc(57vw - 20px)
                    font-size 14px

            .login-btn
                margin-top 10px
                width 100%
                height 35px
                line-height 35px
                text-align center
                background #007aff
                color white
                border-radius: 3px

            .login-toRegiste
                color #007aff
                height 35px
                line-height 35px
                font-size 12px
                font-weight bold

            .login-forget
                color #dd524d
                height 35px
                line-height 35px
                font-size 12px
                font-weight bold


</style>
